<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="js/mui.min.js"></script>

    <link rel="stylesheet" type="text/css" href="css/registLogin/util.css">
    <link rel="stylesheet" type="text/css" href="css/registLogin/main.css">

    <script type="text/javascript" charset="utf-8">
        mui.init();
        mui.plusReady(function () {
            plus.navigator.setStatusBarBackground("#555555");
            plus.navigator.setStatusBarStyle("light")
        })
    </script>

    <style>
        .p-t-85 {
            padding-top: 10px;
        }

        .p-b-70 {
            padding-bottom: 35px;
        }

        .m-t-85 {
            margin-top: 15px;
        }

        .container-login100 {
            padding: 25px;
        }

        /*toast信息提示*/

        .mui-toast-container {
            bottom: 50% !important;
        }

        .mui-toast-message {
            opacity: 0.6;
            color: #fff;
            width: 180px;
            padding: 70px 5px 10px 5px;
        }
    </style>
</head>

<body>

<div class="mui-content">
    <div class="container-login100">
        <div class="wrap-login100 p-t-85 p-b-20">
            <form id="userform">
						<span class="login100-form-title p-b-70">
							<h5>Netty Message</h5>
						</span>
                <span class="login100-form-avatar">
							<img id="img_login_face" src="image/face.jpeg" alt="啊啊啊啊">
						</span>

                <div class="wrap-input100 validate-input m-t-85 m-b-35">
                    <input class="input100" type="text" id="username" name="username" placeholder="用户名">
                    <span class="focus-input100"></span>
                </div>

                <div class="wrap-input100 validate-input m-b-50">
                    <input class="input100" type="password" id="txt_password" name="password" placeholder="密码">
                    <span class="focus-input100"></span>
                </div>
                <div class="container-login100-form-btn">
                    <button type="submit" id="registOrLogin" class="login100-form-btn">
                        登录/注册
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
    mui.plusReady(function () {
            //禁止返回登录状态才可进的页面
            mui.back = function () {
                return false;
            };
            //判断用户是否登录过,如果登录过则自动登录
            var userInfo = app.getUserGlobalInfo();
            if (userInfo != null) {

                //开启web socket
                var chart_List = plus.webview.getWebviewById("chart-List.html");
                mui.fire(chart_List, "openWebSocket");
                //拉取未读消息 存储进缓存
                getNoneReadMsgByUserId(userInfo.id);
                //拉取聊天快照 并存储
                getNoneReadChatSnapshot(userInfo.id);
                // 页面跳转
                mui.openWindow("index.html", "index.html");
            }


            var userform = document.getElementById("userform");
            var username = document.getElementById("username");
            var password = document.getElementById("txt_password");

            userform.addEventListener("submit", function (e) {
                //判断用户名是否为空,如果为空则让其获得焦点
                if (!app.isNotNull(username.value)) {
                    //获取焦点
                    username.focus();
                } else if (!app.isNotNull(password.value)) {
                    //获取焦点
                    password.focus();
                } else {
                    //判断用户名和密码的长度,进行限制
                    if (username.value.length > 12) {
                        app.showToast("用户名长度不能超过12位", "error");
                        plus.nativeUI.toast()
                        return false;
                    } else if (password.value.length > 12) {
                        app.showToast("密码长度不能超过12位", "error");
                        return false;
                    }

                    // 获取每台手机的唯一cid
                    var cid = plus.push.getClientInfo().clientid;
                    // 与后端联调
                    mui.ajax(app.serverUrl + "/user/login", {
                        data: {
                            username: username.value,
                            password: password.value,
                            cid: cid
                        },
                        dataType: 'json',//服务器返回json格式数据
                        type: 'post',//HTTP请求类型
                        timeout: 10000,//超时时间设置为10秒；
                        headers: {'Content-Type': 'application/json'},
                        success: function (data) {
                            //服务器返回响应，根据响应结果，分析是否登录成功；
                            console.log(JSON.stringify(data));
                            //让输入框失去焦点
                            username.blur();
                            password.blur();
                            //判断状态
                            if (data.status == 200) {
                                // 登录或者注册成功之后，保存全局用户对象到本地缓存
                                var userInfoJson = data.data;
                                app.setUserGlobalInfo(userInfoJson);

                                // 触发自定义事件 解决退出重新登录后 数据不刷新
                                var chart_Me = plus.webview.getWebviewById("chart-Me.html");
                                mui.fire(chart_Me, "refresh");

                                // 触发自定义事件 解决退出重新登录后 数据不刷新
                                var Contacts = plus.webview.getWebviewById("chart-Contacts.html");
                                mui.fire(Contacts, "refresh");

                                // 触发自定义事件 开启websocket
                                var chart_List = plus.webview.getWebviewById("chart-List.html");
                                mui.fire(chart_List, "openWebSocket");

                                app.refresh();

                                //清空输入框中内容
                                var username_Element = document.getElementById("username");
                                var password_Element = document.getElementById("txt_password");
                                username_Element.value="";
                                password_Element.value="";
                                //拉取未读消息 存储进缓存
                                getNoneReadMsgByUserId(userInfoJson.id);
                                //拉取聊天快照 并存储
                                getNoneReadChatSnapshot(userInfoJson.id);
                                // 页面跳转
                                mui.openWindow("index.html", "index.html");

                            } else {
                                app.showToast(data.msg, "error");
                            }
                        }
                    });
                }
                //阻止默认表单提交
                e.preventDefault()
            });
        }
    );

    //根据用户id获取离线消息并缓存进缓存
    function getNoneReadMsgByUserId(myUserId) {
        mui.ajax(app.serverUrl + "/chat/getNoneReadMsgByUserId", {
            data: {
                myUserId: myUserId
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            success: function (data) {
                console.log("拉取用户id : "+myUserId+" 未读消息" + JSON.stringify(data));
                if (data.data!=null){
                    var noneReadMsgList = data.data;
                    //遍历未读消息列表
                    for (var i=0;i<noneReadMsgList.length;i++){
                        var noneReadMsg = noneReadMsgList[i];
                        app.saveUserChatHistory(noneReadMsg.acceptUserId, noneReadMsg.sendUserId, noneReadMsg.msg, 2,false,noneReadMsg.id);
                    }
                }

            }
        });
    }

    //根据用户id获取离线未读的快照
    function getNoneReadChatSnapshot(myUserId) {
        mui.ajax(app.serverUrl + "/chat/getNoneReadChatSnapshot", {
            data: {
                myUserId: myUserId
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'post',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            headers: {'Content-Type': 'application/x-www-form-urlencoded'},
            success: function (data) {
                console.log("拉取用户id : "+myUserId+" 未读消息" + JSON.stringify(data));
                if (data.data!=null){
                    var NoneReadChatSnapshotList = data.data;
                    //遍历未读消息列表
                    for (var i=0;i<NoneReadChatSnapshotList.length;i++){
                        var NoneReadChatSnapshot = NoneReadChatSnapshotList[i];
                        app.saveUserChatSnapshot(NoneReadChatSnapshot.acceptUserId, NoneReadChatSnapshot.sendUserId, NoneReadChatSnapshot.msg, false);
                    }
                }

            }
        });
    }

</script>

</body>

</html>